<template>
  <div class="container">
    <div class="filter-container">
      <div class="flex-row" style="width: 90%">
        <div class="flex-1" style="line-height: 40px;">系统参数</div>
        <el-button type="primary" size="middle" @click="addUser()" v-if="controlBtn.add">添加参数</el-button>
        
      </div>
    </div>
    <el-table v-loading="loading"
    :data="systemList"
    border
    style="width: 90%">
    <el-table-column
      prop="key_title"
      label="参数名称"
      align="center">
    </el-table-column>
    <el-table-column
    prop="code"
    label="参数编码"
    align="center">
  </el-table-column>
  <el-table-column
  prop="key_type"
  label="参数类型"
  align="center">
  <template slot-scope="{row}"><span>{{{'rge':'区间','str':'字符','num':'数字'}[row.key_type]}}</span></template>
</el-table-column>
 <el-table-column
    prop="key_value"
    label="参数值"
    align="center">
  </el-table-column>
    <el-table-column
      align="center"
      label="操作">
      <template slot-scope="{row}">
        <el-button type="primary" size="small" @click="editUser(row)" v-if="controlBtn.edit">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteUser(row)" v-if="controlBtn.del">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加、编辑 -->
  <el-dialog @close="dialogClose" :title="dialogVisible.title" :visible.sync='dialogVisible.show' :close-on-click-modal=false>
    <el-form :rules="rules" :model="dialogVisible" ref="dialogVisible" label-position="top" class="dialogVisible">
      <el-form-item label="名称" prop="key_title"><el-input v-model="dialogVisible.key_title" placeholder="" clearable></el-input></el-form-item>
      <el-form-item label="参数编号" prop="code"><el-input type="number" v-model="dialogVisible.code" placeholder="" clearable></el-input></el-form-item>
      <el-form-item label="参数类型" prop="key_type">
        <el-select v-model="dialogVisible.key_type" filterable="">
          <el-option v-for="(item ,index) in status" :key="index" :label="item.title" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参数值（区间用,隔开）" prop="key_value"><el-input v-model="dialogVisible.key_value" placeholder="" clearable></el-input></el-form-item>
      <el-form-item>
        <el-button type="default" @click="dialogVisible.show=false">取消</el-button>
        <el-button type="primary" @click="dialogSubmit()">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  </div>
</template>

<script>
import { role_list ,system_list,system_save,system_delete } from '@/api/system'
import store from '@/store'

  export default {
    data() {
      return {
        status:[{title:'区间',code:'rge'},{title:'字符',code:'str'},{title:'数字',code:'num'}],
        loading:false,
        total:0,
        systemList:[],
        dialogVisible:{
          show:false,
          title:'添加参数',
          key_title:'',
          code:'',
          key_type:'rge',
          key_value:'',
          id:0
        },
        rules:{
          key_title:[{required:true,message:'账号不能为空',trigger: 'blur'}],
          code:[{required:true,message:'密码不能为空',trigger: 'blur'}],
          key_type:[{required:true,message:'角色不能为空',trigger: 'change'}],
          key_value:[{required:true,message:'角色不能为空',trigger: 'change'}],
        },
        controlBtn:{
          add:false,
          del:false,
          edit:false,
          auth:false
        }
      }
    },
    methods:{
      dialogClose(){
        // this.$refs.dialogVisible.resetFields()
      },
      editUser(row){
        console.log(row)
        this.dialogVisible.title='编辑参数'
        this.dialogVisible.key_title=row.key_title
        this.dialogVisible.code=row.code
        this.dialogVisible.id=row.id
        this.dialogVisible.key_type=row.key_type
        this.dialogVisible.key_value=row.key_value
        this.dialogVisible.show=true
      },
      deleteUser(row){
        let that = this
       this.$confirm('确实删除当前参数吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
       }).then(()=>{
        system_delete({id:parseInt(row.id)}).then(res=>{
              that.getSystemList()
            })
       })
      },
      dialogSubmit(){
        let that = this
        this.$refs['dialogVisible'].validate((valid)=>{
          if(valid){
            let newList = JSON.parse(JSON.stringify(that.dialogVisible))
            newList.code = parseInt(that.dialogVisible.code)
            that.dialogVisible.show=false
            system_save(newList).then(res=>{
              that.getSystemList()
            })
          }
        })
      },
      addUser(){
        this.dialogVisible.title='添加参数'
        this.dialogVisible.key_title=''
        this.dialogVisible.code=''
        this.dialogVisible.id=0
        this.dialogVisible.key_type='rge'
        this.dialogVisible.key_value=''
        this.dialogVisible.show=true
      },
      getSystemList(){
        this.loading = true
        system_list().then(res=>{
          this.systemList = res
          this.loading = false
        })
        // system_list().then(res=>{
        //   this.roleList = res
        //   this.loading = false
        // })
      }
    },
    mounted(){
      this.getSystemList()
      const mainRoutes = store.getters.mainRoutes
      if(mainRoutes.system && mainRoutes.system.length>0){
        mainRoutes.system.forEach(e=>{
          if(e == '增加'){
            this.controlBtn.add = true
          }
          if(e == '删除'){
            this.controlBtn.del = true
          }
          if(e == '修改'){
            this.controlBtn.edit = true
          }
          if(e == '权限'){
            this.controlBtn.auth = true
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialogVisible {
    ::v-deep.el-form-item__label{
      padding: 0 !important;
    }
  }
  .filter-container { padding-bottom: 10px; }
</style>